<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>猫抓 设置</title>
  <link rel="stylesheet" type="text/css" href="css/public.css" media="all" />
  <link rel="stylesheet" type="text/css" href="css/options.css" media="all" />
  <script src="lib/jquery.min.js"></script>
  <script src="js/init.js"></script>
  <script src="js/function.js"></script>
</head>

<body>
  <div class="wrapper">
    <section>
      <h1 class="optionsTitle">抓取后缀</h1>
      <div class="optionBox">
        <span class="explain">填写不含"."的后缀, 不过滤大小填0</span>
        <table id="extList">
          <tr>
            <th>扩展名</th>
            <th>过滤大小</th>
            <th>启用</th>
            <th>删除</th>
          </tr>
        </table>
        <div class="flex-end">
          <button type="button" id="AddExt" class="button2">添加后缀</button>
          <button type="button" id="ResetExt" data-reset="Ext">重置后缀设置</button>
          <button type="button" id="allDisable" data-switch="Ext">全部禁用</button>
          <button type="button" id="allEnable" data-switch="Ext">全部启用</button>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">抓取类型</h1>
      <div class="optionBox">
        <span class="explain">填入正确的content-type类型, 不过滤大小填0</span>
        <table id="typeList">
          <tr>
            <th>类型</th>
            <th>过滤大小</th>
            <th>启用</th>
            <th>删除</th>
          </tr>
        </table>
        <div class="flex-end">
          <button type="button" id="AddType" class="button2">添加类型</button>
          <button type="button" id="ResetType" data-reset="Type">重置类型设置</button>
          <button type="button" id="allDisable" data-switch="Type">全部禁用</button>
          <button type="button" id="allEnable" data-switch="Type">全部启用</button>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">
        <img src="img/regex.png" style="width: 18px" />正则匹配 / 屏蔽资源
      </h1>
      <div class="optionBox">
        <span class="explain"><b>屏蔽资源</b> 屏蔽不想出现的资源</span><br>
        <span class="explain"><b>标志</b> i: 忽略大小写, g: 全局搜索。也可为空。</span><br>
        <span class="explain"><b>扩展</b> 为获取到的URL指定一个扩展名, 可留空，会自动截取扩展名(很多文件并不存在扩展名)</span><br>
        <span class="explain"><b>提示</b> 正则表达式占用资源较高, 非必要谨慎使用</span><br><br>
        <table id="regexList">
          <tr>
            <th>标志</th>
            <th>正则表达式</th>
            <th>扩展</th>
            <th>屏蔽资源</th>
            <th>启用</th>
            <th>删除</th>
          </tr>
        </table>
        <div class="flex-end">
          <button type="button" id="AddRegex" class="button2">添加正则</button>
          <button type="button" id="ResetRegex" data-reset="Regex">重置正则设置</button>
          <button type="button" id="allDisable" data-switch="Regex">全部禁用</button>
          <button type="button" id="allEnable" data-switch="Regex">全部启用</button>
        </div>
        <span style="font-weight: bold; font-size: 15px">正则测试</span><br />
        <span>要匹配的URL:</span><br />
        <input type="text" id="testUrl" style="width: 590px" /><br />
        <span>正则表达式:</span><br />
        <input type="text" id="testRegex" style="width: 590px" /><br />
        <span>标识符:</span><br />
        <input type="text" id="testFlag" style="width: 20px" value="ig" />
        结果: <span style="color: #ff0000" id="testResult">不匹配</span>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">
        复制选项
      </h1>
      <div class="optionBox">
        <span class="explain">
          为方便使用第三方应用，自定义复制按钮写入剪贴板的内容。<br />
          <a href="https://o2bmm.gitbook.io/cat-catch/docs/settings#keywords" target="_blank">猫抓替换关键词列表</a><br /><br />
          <div class="item">
            <div>HLS m3u8文件</div>
            <textarea id="copyM3U8" save="input" type="text" class="width100"></textarea>
          </div>
          <div class="item" style="margin-top: 10px;">
            <div>DASH mpb文件</div>
            <textarea id="copyMPD" save="input" type="text" class="width100"></textarea>
          </div>
          <div class="item" style="margin-top: 10px;">
            <div>其他文件</div>
            <textarea id="copyOther" save="input" type="text" class="width100"></textarea>
          </div>
          <div class="flex-end">
            <button type="button" id="ResetCopy">重置复制设置</button>
          </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle"><a href="https://github.com/nilaoda/N_m3u8DL-CLI" target="_blank">N_m3u8DL-CLI</a></h1>
      <div class="optionBox" id="m3u8dlOption">
        <span class="explain">非常优秀的m3u8 mpd第三方下载工具 使用方法查看
          <a href="https://o2bmm.gitbook.io/cat-catch/docs/m3u8dl" target="_blank">用户文档</a>
        </span>
        <div class="list">
          <div class="item">
            <div>调用<a href="https://github.com/nilaoda/N_m3u8DL-CLI" target="_blank">N_m3u8DL-CLI</a>的m3u8dl://协议下载m3u8
              和 mpd</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="m3u8dl" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>
          <div class="item">
            <div style="margin-bottom: 5px;margin-top: 5px;">
              <a href="https://o2bmm.gitbook.io/cat-catch/docs/settings#keywords" target="_blank">猫抓替换关键词列表</a>
              <a href="https://nilaoda.github.io/N_m3u8DL-CLI/Advanced.html" target="_blank"
                style="margin-left: 10px;">N_m3u8DL-CLI 参数</a>
              <p>参数设置</p>
            </div>
            <textarea id="m3u8dlArg" save="input" type="text" class="width100 break-all" rows="3"></textarea>
          </div>
          <div class="flex-end">
            <button type="button" id="ResetM3u8dl">重置参数设置</button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">替换标签</h1>
      <div class="optionBox" id="tag">
        <span class="explain">
          用于N_m3u8DL-CLI 和 复制选项 的标签设置和测试
        </span>
        <div style="margin-bottom: 5px;">
          <a href="https://o2bmm.gitbook.io/cat-catch/docs/settings#keywords" target="_blank">猫抓替换关键词列表</a>
        </div>
        <div class="list">
          <div class="item">
            <div>自定义保存文件名</div>
            <textarea id="downFileName" save="input" type="text" class="width100"></textarea>
          </div>
          <div class="item">
            <div>标签 ${userAgent} 留空默认为当前浏览器 User Agent</div>
            <textarea id="userAgent" save="input" type="text" class="width100"></textarea>
          </div>
          <div class="item">
            <div>标签 ${mobileUserAgent} / 模拟手机User Agent</div>
            <textarea id="MobileUserAgent" save="input" type="text" class="width100"></textarea>
          </div>
          <div id="testTag" class="hide break-all">
            <div class="item">
              <div>
                <p>测试</p>
              </div>
              <textarea id="testTextarea" type="text" class="width100 break-all"
                rows="3">${url} ${referer|exists:'--headers "Referer:*"'} ${url|regexp:"(https?://[^?]*)"|replace:"http://","https://"|to:base64}</textarea>
            </div>
            ${url}<input type="text" class="width100" value="https://bmmmd.com/test.m3u8" id="url">
            ${referer}<input type="text" class="width100" value="https://bmmmd.com/" id="referer">
            ${initiator}<input type="text" class="width100" value="https://bmmmd.com" id="initiator">
            ${webUrl}<input type="text" class="width100" value="https://bmmmd.com/test.html" id="webUrl">
            ${title}<input type="text" class="width100" value="测试视频" id="title">
            替换后:<br><span id="tagTestResult"></span>
          </div>
          <div class="flex-end">
            <button type="button" id="showTestTag">测试</button>
            <button type="button" id="ResetTag">重置标签设置</button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">下载器</h1>
      <div class="optionBox" id="downOption">
        <span class="explain">
          如果检测到资源下载失败, 自动启用下载器再次尝试下载.
        </span>
        <div class="list">
          <div class="item">
            <div>始终不启用猫抓下载器</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="catDownload" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

          <div class="item">
            <div>下载完自动关闭页面</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="downAutoClose" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

          <div class="item">
            <div>后台打开下载器页面</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="downActive" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">其他设置</h1>
      <div class="optionBox" id="OtherOption">
        <div class="list otherOption">
          <div class="item">
            <div>
              使用本地播放器调用协议打开视频预览 <select id="PlayerTemplate" class="select"></select>
            </div>
            <input id="Player" save="input" type="text" class="width100" placeholder="留空为不启用 默认使用popup页面预览视频" />
          </div>

          <div class="item">
            <div>使用自定义文件名保存文件(默认为网页标题)</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" save="click" id="TitleName" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

          <div class="item">
            <div>下载时选择保存目录</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="saveAs" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

          <div class="item">
            <div>显示网站图标</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" save="click" id="ShowWebIco" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

          <div class="item">
            <div>刷新、跳转到新页面 清空当前标签抓取的数据</div>
            <div class="switch">
              <select id="autoClearMode" class="select" save="select">
                <option value="0">不清空</option>
                <option value="1">正常清理</option>
                <option value="2">更频繁</option>
              </select>
            </div>
          </div>

          <div class="item">
            <div>排除重复的资源 (资源过多会占用大量CPU)</div>
            <div class="switch">
              <label class="switchLabel switchRadius">
                <input type="checkbox" id="checkDuplicates" save="click" class="switchInput" />
                <span class="switchRound switchRadius"><em class="switchRoundBtn switchRadius"></em></span>
              </label>
            </div>
          </div>

        </div>
        <div class="flex-end">
          <button type="button" id="ResetOption">重置其他设置</button>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">自定义CSS</h1>
      <div class="optionBox">
        <div class="item">
          <textarea id="css" save="input" type="text" class="width100" rows="10"></textarea>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">操作</h1>
      <div class="optionBox">
        <div class="flex-end" style="justify-content: center">
          <input id="importOptionsFile" type="file" class="hide" />
          <button type="button" id="exportOptions">导出设置</button>
          <button type="button" id="importOptions">导入配置</button>
          <button type="button" id="ClearData">清空抓取的数据</button>
          <button type="button" id="ResetAllOption">重置所有设置</button>
          <button type="button" id="extensionReload">重启扩展</button>
        </div>
      </div>
    </section>

    <section>
      <h1 class="optionsTitle">关于</h1>
      <div class="optionBox">
        <div class="item">
          <div id="version"></div>
        </div>
        <div class="item">
          文档说明:
          <a href="https://o2bmm.gitbook.io/cat-catch/" target="_blank">
            https://o2bmm.gitbook.io/cat-catch/</a>
        </div>
        <div class="item">
          Github:
          <a href="https://github.com/xifangczy/cat-catch" target="_blank">
            https://github.com/xifangczy/cat-catch</a>
        </div>
      </div>
    </section>
  </div>

  <script src="lib/base64.js"></script>
  <script src="js/options.js"></script>
</body>

</html>